<template>
  <view class="appointment-container">
    <view class="header">
      <text class="title">预约</text>
    </view>

    <view class="appointment-tabs">
      <view class="tab-item" :class="{ active: activeTab === 'pending' }" @tap="activeTab = 'pending'">
        <text>待确认</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'confirmed' }" @tap="activeTab = 'confirmed'">
        <text>已确认</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'completed' }" @tap="activeTab = 'completed'">
        <text>已完成</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'canceled' }" @tap="activeTab = 'canceled'">
        <text>已取消</text>
      </view>
    </view>

    <view class="appointment-list">
      <view class="appointment-card" v-for="(appointment, index) in appointments" :key="index">
        <view class="card-header">
          <image :src="appointment.partner.avatar" class="partner-avatar" mode="aspectFill"></image>
          <view class="partner-info">
            <text class="partner-name">{{ appointment.partner.name }}</text>
            <text class="partner-detail">
              {{ appointment.partner.gender === 'male' ? '男' : '女' }} ·
              {{ appointment.partner.age }}岁 ·
              {{ appointment.partner.location }}
            </text>
          </view>
          <view class="status-tag" :class="appointment.status">
            <text>{{ getStatusText(appointment.status) }}</text>
          </view>
        </view>

        <view class="appointment-details">
          <view class="detail-item">
            <text class="detail-label">预约时间：</text>
            <text class="detail-value">{{ appointment.time }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">预约地点：</text>
            <text class="detail-value">{{ appointment.location }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">预约内容：</text>
            <text class="detail-value">{{ appointment.content }}</text>
          </view>
        </view>

        <view class="action-buttons" v-if="appointment.status === 'pending'">
          <button class="cancel-btn" @tap="cancelAppointment(index)">取消</button>
          <button class="confirm-btn" @tap="confirmAppointment(index)">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const activeTab = ref('pending');

const appointments = ref([
  {
    id: 1,
    partner: {
      name: '小红',
      avatar: '/static/logo.png',
      gender: 'female',
      age: 23,
      location: '北京'
    },
    time: '2023-10-15 14:30',
    location: '北京朝阳区咖啡馆',
    content: '一起喝咖啡聊天',
    status: 'pending'
  },
  {
    id: 2,
    partner: {
      name: '小李',
      avatar: '/static/logo.png',
      gender: 'male',
      age: 26,
      location: '上海'
    },
    time: '2023-10-20 10:00',
    location: '上海静安区书店',
    content: '一起看书交流',
    status: 'confirmed'
  },
  {
    id: 3,
    partner: {
      name: '小张',
      avatar: '/static/logo.png',
      gender: 'female',
      age: 24,
      location: '广州'
    },
    time: '2023-10-10 16:00',
    location: '广州天河区电影院',
    content: '一起看电影',
    status: 'completed'
  },
  {
    id: 4,
    partner: {
      name: '小王',
      avatar: '/static/logo.png',
      gender: 'male',
      age: 27,
      location: '深圳'
    },
    time: '2023-10-12 18:30',
    location: '深圳南山区餐厅',
    content: '一起晚餐',
    status: 'canceled'
  }
]);

onLoad(() => {
  console.log('预约页面加载');
});

const getStatusText = (status) => {
  const statusMap = {
    pending: '待确认',
    confirmed: '已确认',
    completed: '已完成',
    canceled: '已取消'
  };
  return statusMap[status] || '未知状态';
};

const cancelAppointment = (index) => {
  appointments.value[index].status = 'canceled';
  uni.showToast({
    title: '已取消预约',
    icon: 'success'
  });
};

const confirmAppointment = (index) => {
  appointments.value[index].status = 'confirmed';
  uni.showToast({
    title: '已确认预约',
    icon: 'success'
  });
};
</script>

<style scoped>
.appointment-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
}

.appointment-tabs {
  display: flex;
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  color: #6d4aff;
  font-weight: bold;
  border-bottom: 4rpx solid #6d4aff;
}

.appointment-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.appointment-card {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.partner-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.partner-info {
  flex: 1;
}

.partner-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.partner-detail {
  font-size: 24rpx;
  color: #666;
}

.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
}

.status-tag.pending {
  background-color: #fff0c9;
  color: #ff9f43;
}

.status-tag.confirmed {
  background-color: #d4f3e8;
  color: #1dd1a1;
}

.status-tag.completed {
  background-color: #d5d7ff;
  color: #6d4aff;
}

.status-tag.canceled {
  background-color: #f5f5f5;
  color: #999;
}

.appointment-details {
  margin-bottom: 30rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 28rpx;
  color: #666;
  min-width: 140rpx;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  line-height: 40rpx;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.cancel-btn {
  width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 26rpx;
  background-color: #fff;
  color: #666;
  border: 1rpx solid #ddd;
  border-radius: 50rpx;
}

.confirm-btn {
  width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 26rpx;
  background-color: #6d4aff;
  color: white;
  border-radius: 50rpx;
}
</style>